<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 消息管理 </el-breadcrumb-item>
                <el-breadcrumb-item>消息详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div >
                <el-form ref="form" :model="form" label-width="100px">
                
                    <el-form-item label="发送人编号" prop="tid">
                        <el-input v-model="form.tid" disabled class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="发送人姓名" prop="name">
                        <el-input v-model="form.name" disabled class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="收件人姓名" prop="receivers">
                        <el-tag v-for="(item,index) in msgEmp" :key="index">{{item.tid+'-'+item.name}}</el-tag>
                    </el-form-item>

                    <el-form-item label="消息类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择类型" disabled>
                            <el-option key="1" label="普通消息" value="00" ></el-option>
                            <el-option key="2" label="通知消息" value="01" ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="发送时间" prop="createTime">
                        <el-input v-model="form.createTime" disabled class="input_width"></el-input>
                    </el-form-item>

                      <el-form-item label="状态" prop="title">
                        <el-switch
                            style="display: block"
                            v-model="form.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-value="01"
                            inactive-value="00"
                            active-text="正常"
                            inactive-text="已删除">
                        </el-switch>
                    </el-form-item>

                    <el-form-item label="信息标题" prop="title">
                        <el-input v-model="form.title" disabled class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="内容" prop="html">
                        <mavon-editor :value="form.content" ref="md" :toolbarsFlag="false" :subfield="false" :defaultOpen="'preview'"  style="min-height: 600px;width:700px" :editable="false" />
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import 'mavon-editor/dist/css/index.css'
import { mavonEditor } from 'mavon-editor'
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            
            id: this.$route.query.id,
            form: {},
            msgEmp:[],
        };
    },
     components: {
            mavonEditor
    },
    created: function () {
        this.init();
        this.getMsgEmp();
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        async init() {
            var a = await this.$http.get('/msg/' + this.id);

            if (a.code == 200) {
                this.form = a.data;
            } else {
                this.$message.error(a.message);
            }
        },

        async getMsgEmp(){
            var d = await this.$http.get("/msgEmpByMid/"+this.id);
            if (d.code==200) {
                this.msgEmp=d.data;
            }
        },

    }
};
</script>
<style scoped>
.input_width{
    width: 300px;
}
</style>